<template>
  <div>
    <n-card :bordered="false" class="proCard">
      <div class="zheng_tops">
        <div>
          <n-button type="primary" @click="newContent"> 新建 </n-button>
          <n-button type="error" @click="deleContent"> 批量删除 </n-button>
          <div class="searchs">
            <n-input
              placeright_butholder="搜索项目名称"
              style="width: 270px"
              v-model:value="inputValue"
            >
              <template #prefix>
                <n-icon :component="FlashOutline" />
              </template>
            </n-input>
            <n-button type="primary" @click="searchig" style="margin-left: 5px"> 搜索 </n-button>
          </div>
        </div>
        <div class="right_but">
          <n-button type="primary" @click="refresh"> 刷新 </n-button>
          <n-button type="success" @click="portexcel"> 导出excel </n-button>
        </div>
      </div>
      <div style="height: 20px"></div>
      <n-data-table
        striped
        :columns="columns"
        :data="allData"
        :pagination="pagination"
        :row-key="rowKey"
        :align="right"
        :scroll-x="1500"
        @update:checked-row-keys="handleCheck"
      />
    </n-card>
    <n-modal v-model:show="showModals" :mask-closable="false" preset="dialog" title="编辑">
      <div>
        <n-form
          ref="formRef"
          :model="tableDate"
          :rules="rules"
          label-placement="left"
          label-width="auto"
          require-mark-placement="right-hanging"
          :size="size"
          :style="{
            maxWidth: '640px',
          }"
        >
          <n-form-item label="反馈ID" path="id">
            <n-input v-model:value="tableDate.id" placeholder="请输入ID" disabled />
          </n-form-item>
          <n-form-item label="用户ID" path="uid">
            <n-input v-model:value="tableDate.uid" placeholder="请输入ID" disabled />
          </n-form-item>
          <n-form-item label="反馈内容" path="info">
            <n-input v-model:value="tableDate.info" type="textarea" placeholder="请输入反馈内容" />
          </n-form-item>
          <n-form-item label="状态" path="status">
            <n-select
              v-model:value="tableDate.status"
              placeholder="请选择状态"
              :options="generalOptions"
            />
          </n-form-item>
          <n-form-item label="处理结果" path="results">
            <n-input v-model:value="tableDate.results" placeholder="请输入结果" />
          </n-form-item>
          <n-form-item label="处理人ID" path="oid">
            <n-input v-model:value="tableDate.oid" placeholder="请输入处理人ID" />
          </n-form-item>
          <div style="display: flex; justify-content: flex-end">
            <n-button round type="primary" @click="handleValidateButtonClick"> 保存 </n-button>
          </div>
        </n-form>
      </div>
    </n-modal>
    <!-- 新建 -->
    <n-modal v-model:show="showNew" :mask-closable="false" preset="dialog" title="新建">
      <div>
        <n-form
          ref="formRefs"
          :model="newModel"
          :rules="newRules"
          label-placement="left"
          label-width="auto"
          require-mark-placement="right-hanging"
          :size="size"
          :style="{
            maxWidth: '640px',
          }"
        >
          <n-form-item label="用户ID" path="name">
            <n-input v-model:value="newModel.name" placeholder="请输入证书名称" />
          </n-form-item>
          <n-form-item label="反馈内容" path="info">
            <n-input v-model:value="newModel.info" type="textarea" placeholder="请输入反馈内容" />
          </n-form-item>
          <div style="display: flex; justify-content: flex-end">
            <n-button round type="primary" @click="handleValidateButtonClicks"> 确认 </n-button>
          </div>
        </n-form>
      </div>
    </n-modal>
  </div>
</template>
<script>
  import { h, ref, defineComponent, getCurrentInstance, reactive, nextTick } from 'vue';
  import { useMessage, NButton, NImage, useDialog } from 'naive-ui';
  import { FlashOutline } from '@vicons/ionicons5';
  import table2excel from 'js-table2excel';

  const createColumns = ({ play, dele }) => {
    return [
      {
        type: 'selection',
      },
      {
        title: 'ID',
        key: 'id',
      },
      {
        title: '用户ID',
        key: 'uid',
      },
      {
        title: '反馈内容',
        key: 'info',
      },
      {
        title: '状态',
        key: 'status',
      },
      {
        title: '处理结果',
        key: 'results',
      },
      {
        title: '用户姓名',
        key: 'u_name',
      },
      {
        title: '用户身份证号',
        key: 'u_id_number',
      },
      {
        title: '用户手机号',
        key: 'u_tel',
      },
      {
        title: '操作',
        fixed: 'right',
        titleRowSpan: 1,
        width: 80,
        render(row) {
          return h(
            NButton,
            {
              size: 'small',
              type: 'info',
              onClick: () => play(row),
            },
            { default: () => '编辑' }
          );
        },
      },
      {
        key: 'actions',
        width: 80,
        fixed: 'right',
        render(row) {
          return h(
            NButton,
            {
              size: 'small',
              type: 'error',
              onClick: () => dele(row),
            },
            { default: () => '删除' }
          );
        },
      },
    ];
  };

  export default defineComponent({
    setup() {
      const allData = ref();
      const message = useMessage();
      const showModals = ref(false);
      const showNew = ref(false);
      const showModalRef = ref(false);
      const checkedRowKeysRef = ref([]);
      const formRef = ref(null);
      const formRefs = ref(null);
      const tableDate = ref({});
      const dialog = useDialog();
      const inputValue = ref('');
      const newModel = reactive({
        name: '',
        info: '',
      });
      const generalOptions = ref([
        {
          label: '未处理',
          value: 0,
        },
        {
          label: '处理中',
          value: 1,
        },
        {
          label: '已处理',
          value: 2,
        },
        {
          label: '已取消',
          value: 3,
        },
      ]);
      let { proxy } = getCurrentInstance();
      const lists = () => {
        proxy
          .$axios({
            url: '/api/feedback/index/index', //列表数据
            method: 'post',
            data: {
              admin_id: 111,
              admin_name: '张',
            },
          })
          .then((res) => {
            console.log(res.data);
            allData.value = res.data.data.list;
            data.alldata = res.data.data;
            for (let i = 0; i < allData.value.length; i++) {
              if (allData.value[i].status == 1) {
                allData.value[i].status = '已完成';
              } else if (allData.value[i].status == 2) {
                allData.value[i].status = '进行中';
              } else {
                allData.value[i].status = '已结束';
              }
            }
          });
      };
      lists();
      //点击新建
      const newContent = () => {
        showNew.value = true;
      };
      const data = reactive({
        arr: [],
        data: [],
        alldata: [],
      });
      //搜索
      const searchig = () => {
        data.arr = [];
        console.log(data.alldata.list);
        for (let i = 0; i < data.alldata.list.length; i++) {
          if (data.alldata.list[i].u_name.indexOf(inputValue.value) != -1) {
            data.arr.push(data.alldata.list[i]);
          }
        }
        console.log(data.arr);
        allData.value = data.arr;
      };
      // 刷新
      const tables = reactive({
        isReloadData: true,
      });
      const refresh = () => {
        tables.isReloadData = false;
        setTimeout(() => {
          nextTick(() => {
            tables.isReloadData = true;
            inputValue.value = null;
            lists();
          });
        }, 400);
      };
      //批量删除
      const checkKeys = reactive({
        deleall: [],
        checkKey: [],
        checkKeyAll: [],
      });
      const deleContent = () => {
        if (checkKeys.checkKey.length != 0) {
          dialog.warning({
            title: '删除',
            content: '删除后可在回收站查找',
            positiveText: '确定',
            negativeText: '取消',
            onPositiveClick: () => {
              proxy
                .$axios({
                  url: '/api/api/Project/pro_push',
                  method: 'post',
                  data: {
                    ids: checkKeys.deleall,
                    admin_id: 111,
                    admin_name: '张',
                  },
                })
                .then((res) => {
                  console.log(res.data);
                  if (res.data.code == 1) {
                    message.success('删除成功');
                    lists();
                  }
                });
            },
          });
        } else {
          message.error('请勾选项目');
        }
      };
      // 导出
      const portexcel = () => {
        const excelName = '信息反馈';
        const column = [
          {
            title: 'ID',
            key: 'id',
            type: 'text',
          },
          {
            title: '用户ID',
            key: 'uid',
            type: 'text',
          },
          {
            title: '反馈内容',
            key: 'info',
            type: 'text',
          },
          {
            title: '状态',
            key: 'status',
            type: 'text',
          },
          {
            title: '处理结果',
            key: 'results',
            type: 'text',
          },
          {
            title: '用户姓名',
            key: 'u_name',
            type: 'text',
          },
          {
            title: '用户身份证号',
            key: 'u_id_number',
            type: 'text',
          },
          {
            title: '用户手机号',
            key: 'u_tel',
            type: 'text',
          },
        ];
        if (checkKeys.checkKey.length == 0) {
          message.error('您未选中导出项');
        } else {
          message.success('正在导出中......');
          table2excel(column, checkKeys.checkKey, excelName);
          message.success('导出成功');
          checkKeys.checkKey = [];
        }
      };
      return {
        allData,
        data,
        FlashOutline,
        newContent,
        showNew,
        formRef,
        formRefs,
        tableDate,
        searchig,
        inputValue,
        generalOptions,
        tables,
        refresh,
        deleContent,
        checkKeys,
        portexcel,
        columns: createColumns({
          play(row) {
            console.log(row);
            showModals.value = true;
            tableDate.value = row;
          },
          dele(row) {
            console.log(row.id);
            dialog.warning({
              title: '删除',
              content: '你确定要删除吗？',
              positiveText: '确定',
              negativeText: '不确定',
              onPositiveClick: () => {
                proxy
                  .$axios({
                    url: '/api/feedback/index/cancel',
                    method: 'post',
                    data: {
                      id: row.id,
                      admin_id: 111,
                      admin_name: '张',
                    },
                  })
                  .then((res) => {
                    console.log(res.data);
                    if (res.code == 1) {
                      message.success('删除成功');
                      lists();
                    }
                  });
              },
              onNegativeClick: () => {},
            });
          },
        }),
        checkedRowKeys: checkedRowKeysRef,
        pagination: {
          pageSize: 5,
        },
        rowKey: (row) => row,
        handleCheck(rowKeys) {
          for (let i = 0; i < rowKeys.length; i++) {
            checkKeys.deleall.push(rowKeys[i].id);
          }
          checkKeys.checkKey = rowKeys;
        },
        // 编辑弹窗
        showModals,
        showModal: showModalRef,
        // 弹窗表单
        model: ref({
          name: null,
          level: null,
          number: null,
          time: null,
          times: null,
        }),
        newModel,
        rules: {
          info: {
            required: true,
            trigger: ['blur', 'input'],
            message: '请输入内容',
          },
          oid: {
            required: true,
            trigger: ['blur', 'input'],
            message: '请输入内容',
          },
          results: {
            required: true,
            trigger: ['blur', 'input'],
            message: '请输入内容',
          },
        },
        newRules: {
          name: {
            required: true,
            trigger: ['blur', 'input'],
            message: '请输入内容',
          },
          info: {
            required: true,
            trigger: ['blur', 'input'],
            message: '请输入内容',
          },
        },
        handleValidateButtonClick(e) {
          e.preventDefault();
          formRef.value?.validate((errors) => {
            if (!errors) {
              proxy
                .$axios({
                  url: '/api/feedback/index/edit',
                  method: 'post',
                  data: {
                    id: tableDate.value.id,
                    uid: tableDate.value.uid,
                    info: tableDate.value.info,
                    status: tableDate.value.status,
                    results: tableDate.value.results,
                    iod: tableDate.value.oid,
                    admin_id: 111,
                    admin_name: '张',
                  },
                })
                .then((res) => {
                  console.log(res.data);
                  if (res.data.code == 1) {
                    message.success('编辑成功');
                    showModals.value = false;
                    lists();
                  } else {
                    message.error('编辑失败');
                  }
                });
            } else {
              console.log(errors);
              message.error('保存失败');
            }
          });
        },
        handleValidateButtonClicks(e) {
          e.preventDefault();
          formRefs.value?.validate((errors) => {
            if (!errors) {
              proxy
                .$axios({
                  url: '/api/feedback/index/add',
                  method: 'post',
                  data: {
                    uid: newModel.name,
                    info: newModel.info,
                    admin_id: 111,
                    admin_name: '张',
                  },
                })
                .then((res) => {
                  console.log(res.data);
                  if (res.data.code == 1) {
                    lists();
                    message.success('添加成功');
                    showNew.value = false;
                    newModel.name = unll;
                    newModel.info = unll;
                  }
                });
            } else {
              console.log(errors);
              message.error('添加失败');
            }
          });
        },
      };
    },
  });
</script>
<style scoped>
  .win_input {
    width: 100%;
    padding: 5px;
  }
  .win_input label {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 5%;
  }
  .win_input input {
    width: 80%;
    height: 30px;
    padding: 5px;
    border: 1px solid rgb(189, 187, 187);
    border-radius: 5px;
    outline-color: #8ebbee;
  }
  .win_input input:focus {
    box-shadow: 1px 1px 3px #4098fc;
    border: none;
  }
  .win_input input:hover {
    border: 1px solid #4098fc;
  }
  .win_input p {
    width: 60px;
    text-align: end;
  }
  .zheng_tops {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .zheng_tops > div:first-child {
    width: 38%;
    display: flex;
    justify-content: space-between;
  }
  .searchs {
    /* width: 27%; */
    display: flex;
    justify-content: space-around;
  }
  .right_but {
    width: 150px;
    display: flex;
    justify-content: space-between;
  }
</style>

